<template>
  <div class="mt-p-address-towns">
    <group v-if="towns.length>0">
      <cell
      v-for="(town, index) in towns" 
      :key="index" 
      :title="town.name"
      @click.native="handleAreaClick(town)"
      is-link></cell>
    </group>
    <nomore v-else></nomore>
  </div>
</template>

<script>
import { Group, Cell } from "vux"
import Nomore from "./nomore"

export default {
  data() {
    return {
      towns: []
    }
  },
  mounted() {
    this.getTowns(this.areaId)
  },
  methods: {
    async getTowns(aid) {
      this.towns = await this.$store.dispatch("getTowns", aid)
      return
    },
    handleAreaClick(town) {
      this.$router.push("/trade/supplies/post/address/nomore")
      this.$store.commit('setSupplyTown', town)
    }
  },
  computed: {
    areaId() {
      return this.$store.state.posts.supply.area.id
    }
  },
  watch: {
    areaId(aid) {
      this.getTowns(aid)
    }
  },
  components: { Group, Cell, Nomore}
}
</script>

<style lang="scss">
@import "../../../../../styles/index.scss";
</style>
